<template>
  <div>
    <headerNav></headerNav>
    <div class="policyNotice">
      <div class="policyNotice_Nav">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span>政策通知</span>
        </p>
      </div>
      <div class="policyNotice_top">
        <div>
          <!-- 省级 -->
          <div class="policyNotice_top_region">
            <div class="policyNotice_top_region_left">
              <span>地区：</span>
            </div>
            <div
              class="policyNotice_top_region_right"
              v-if="provincialLevel == -1 && judgeWords(regionData, 1)"
              @click="MoreEvent('policyMore')"
            >
              <span ref="policyMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="policyMore2" />
            </div>
            <ul class="policyNotice_top_region_content" v-if="provincialLevel > -1">
              <li class="active active1">
                {{ regionData[provincialLevel].province }}
                <img
                  v-show="isShowError"
                  src="../../../static/image/region_cha.png"
                  alt
                  @click="provincialEmptying"
                />
              </li>
            </ul>
            <ul class="policyNotice_top_region_content" v-else ref="policyMore">
              <li
                :class="provincialLevel == -1 ? 'active' : ''"
                @click="provincialLevel_switch(-1)"
              >全部</li>
              <li
                v-for="(item, index) in regionData"
                :key="index"
                @click="provincialLevel_switch(index)"
                :class="provincialLevel == index ? 'active' : ''"
              >{{ item.province }}</li>
            </ul>
          </div>
          <!-- 市级 -->
          <div class="policyNotice_top_region" v-if="provincialLevel > -1">
            <div class="policyNotice_top_region_left">
              <span></span>
            </div>
            <div
              class="policyNotice_top_region_right"
              v-if="
                MunicipalLevel == -1 &&
                  judgeWords(regionData[provincialLevel].city, 2)
              "
              @click="MoreEvent('cityMore')"
            >
              <span ref="cityMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="cityMore2" />
            </div>
            <ul class="policyNotice_top_region_content" v-if="MunicipalLevel > -1">
              <li class="active active1">
                {{ regionData[provincialLevel].city[MunicipalLevel].name }}
                <img
                  v-show="isShowError"
                  src="../../../static/image/region_cha.png"
                  alt
                  @click="cityLevelClearance"
                />
              </li>
            </ul>
            <ul class="policyNotice_top_region_content" v-else ref="cityMore">
              <li
                :class="MunicipalLevel == -1 ? 'active' : ''"
                @click="MunicipalLevel_switch(-1)"
              >全部</li>
              <li
                v-for="(item, index) in regionData[provincialLevel].city"
                @click="MunicipalLevel_switch(index)"
                :class="MunicipalLevel == index ? 'active' : ''"
                :key="index"
              >{{ item.name }}</li>
            </ul>
          </div>
          <!-- 区级 -->
          <div class="policyNotice_top_region" v-if="MunicipalLevel > -1">
            <div class="policyNotice_top_region_left">
              <span></span>
            </div>
            <div
              class="policyNotice_top_region_right"
              @click="MoreEvent('areaMore')"
              v-if="
                judgeWords(
                  regionData[provincialLevel].city[MunicipalLevel].area,
                  3
                )
              "
            >
              <span ref="areaMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="areaMore2" />
            </div>
            <ul class="policyNotice_top_region_content" ref="areaMore">
              <li :class="DistrictLevel == -1 ? 'active' : ''" @click="DistrictLevel_switch(-1)">全部</li>
              <li
                v-for="(item, index) in regionData[provincialLevel].city[
                  MunicipalLevel
                ].area"
                @click="DistrictLevel_switch(index)"
                :class="DistrictLevel == index ? 'active' : ''"
                :key="index"
              >{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="policyNotice_top_department" style="position: relative">
          <div>
            <div class="policyNotice_top_region_left">
              <span>部门：</span>
            </div>
            <div
              class="policyNotice_top_region_right"
              @click="MoreEvent('deparMore')"
              v-if="judgeWords(departmentData, 4)"
            >
              <span ref="deparMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="deparMore2" />
            </div>
            <ul class="policyNotice_top_region_content" ref="deparMore">
              <li :class="department == -1 ? 'active' : ''" @click="department_switch(-1)">全部</li>
              <li
                v-for="(item, index) in departmentData"
                :key="index"
                @click="department_switch(index)"
                :class="department == index ? 'active' : ''"
              >{{ item.departmentName }}</li>
            </ul>
          </div>
        </div>
        <div class="policyNotice_top_search">
          <div class="policyNotice_top_region_distance">
            <div class="policyNotice_top_region_left">
              <span>关键字：</span>
            </div>
            <div class="policyNotice_top_search_right" @click="$router.push('/policyMap')">政策图谱</div>
            <div class="policyNotice_top_search_content">
              <input placeholder="请输入关键字" ref="keywordInput" />
              <span @click="getList(1)">搜索</span>
            </div>
          </div>
        </div>
      </div>
      <div class="policyNotice_content">
        <div class="policyNotice_content_top">
          <div class="policyNotice_content_top_left">政策名称</div>
          <div class="policyNotice_content_top_content">发布部门</div>
          <div class="policyNotice_content_top_right">发布日期</div>
        </div>
        <div class="policyNotice_content_content" v-show="notYet" v-loading="loading">
          <div
            class="policyNotice_content_content_content"
            v-for="(item, index) in listData"
            :key="index"
          >
            <div class="policyNotice_content_content_content_left">
              <div class="policyNotice_content_content_content_left_right">
                <span v-if="item.surplusDays != null">剩余{{ item.surplusDays }}天</span>
                <p
                  v-if="item.projectPrice != null && item.projectPrice != ''"
                >最高{{ item.projectPrice }}万</p>
              </div>
              <p
                class="policyNotice_content_content_content_left_left"
                @click="noticeDetails(item.policyId, index)"
                v-html="searchHighlight(item.title)"
              ></p>
            </div>
            <div class="policyNotice_content_content_content_content">
              <p
                class="policyNotice_content_content_content_content_left"
                @click="seeEnterprise(item.departmentId)"
                :title="item.departmentName"
              >{{ item.label }}</p>
              <div class="policyNotice_content_content_content_content_right">
                <span
                  :class="item.whetherAttention == 1 ? 'already' : ''"
                  @click="subscribeEven(item.whetherAttention, item.departmentId)"
                >{{ item.whetherAttention == 0 ? "订阅" : "已订阅" }}</span>
              </div>
            </div>
            <div class="policyNotice_content_content_content_right">{{ item.date }}</div>
          </div>
        </div>
        <div class="policyNotice_content_content content_imgse" v-show="!notYet">
          <img src="../../../static/image/noDataBox.png" alt />
          <p>暂无数据</p>
        </div>
      </div>
      <div class="policyNotice_bottom">
        <paging ref="paging_zi" @CurrentPage="chage_CurrentValue" :pageNo="Pagevalue"></paging>
      </div>
    </div>
    <Navigation />
    <footerNav />
    <!-- 登录框 -->
    <el-dialog
      width="360px"
      :show-close="true"
      :visible.sync="centerDiaogVisible"
      :close-on-click-modal="false"
      :before-close="Dialog"
    >
      <tooplit @control="isControlShow" />
    </el-dialog>
    <!-- 关注数量已满 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="300px"
    >
      <template #footer>
        <div class="contents_qydb">
          <img src="@/static/image/cwhyts2.png" alt class="imgs_qydb" />
          <div class="goVip">
            <div class="top">可关注数量已满</div>
            <div class="bn">成为VIP会员畅享更多权益</div>
          </div>
          <div class="option">
            <span class="spans_qydb" @click="dialogVisible = false">再用看看</span>
            <p class="ps_qydb">升级VIP</p>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import tooplit from "../../components/shareCard/dialog.vue"; // 显示登录框
import {
  commonRequest,
  postRequestSplicing,
  postRequest
} from "../../api/api.js";
import { sessionTake } from "../../util/validate.js";
import { getCode } from "../../util/address.js";
import { mapMutations } from "vuex";
export default {
  name: "policyNotice",
  components: {
    paging,
    tooplit
  },
  head() {
    return {
      title: "政策通知-比目镜",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "比目镜(51bmj.cn)，科技产业政策项目数据平台，提供行业扶持资助补贴政策查询、政府部门最新政策实时智能推送、高新技术企业公示名单查询、高新技术企业项目立项查询、高新技术企业荣誉资质查询、高新技术企业商标专利查询、高新技术企业名单统计、科技项目申报查询、政策项目智能匹配、园区孵化器企业查询、政策扶持项目申报服务"
        },
        {
          hid: "keywords",
          name: "keywords",
          content:
            "比目镜，政策查询，政策智能推送，最新政策，政策解读，政策匹配，政府黄页，企业名单，企业查询，企业项目立项查询，高新技术企业名单查询，高企名单，专利查询，商标查询，专利交易信息发布，高新技术企业认定，科技项目申报"
        }
      ]
    };
  },
  data() {
    return {
      centerDiaogVisible: false, // 显示登录框
      regionData: [],
      // 省级选中
      provincialLevel: -1,
      // 市级选中
      MunicipalLevel: -1,
      // 区级选中
      DistrictLevel: -1,
      // 部门
      department: -1,
      // 部门列表
      departmentData: [],
      // 关键字
      keywordValue: "",
      // 列表
      listData: [],
      // 当前页
      Pagevalue: 1,
      loading: true, // 显示loading
      notYet: true,
      dialogVisible: false //关注已满弹框
    };
  },
  computed: {
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    var that = this;
    var that = this;
    var type;
    var needDept = 1;
    // 获取地区
    commonRequest("/api/pms/pmsDepartment/getAllDepartmentArea?type=0").then(
      res => {
        that.regionData = res;
        if (
          that.$route.query.province != undefined &&
          that.$route.query.province != ""
        ) {
          for (let i = 0; i < res.length; i++) {
            if (res[i].province == that.$route.query.province) {
              that.provincialLevel = i;
              if (
                that.$route.query.city != undefined &&
                that.$route.query.city != ""
              ) {
                for (let q = 0; q < res[i].city.length; q++) {
                  if (res[i].city[q].name == that.$route.query.city) {
                    that.MunicipalLevel = q;
                    if (
                      that.$route.query.area != undefined &&
                      that.$route.query.area != ""
                    ) {
                      for (let w = 0; w < res[i].city[q].area.length; w++) {
                        if (res[i].city[q].area[w] == that.$route.query.area) {
                          that.DistrictLevel = w;
                          break;
                        } else if (w + 1 == res[i].city[q].area.length) {
                          break;
                        }
                      }
                    } else {
                      break;
                    }
                  } else if (q + 1 == res[i].city.length) {
                    break;
                  }
                }
              } else {
                break;
              }
            } else if (i + 1 == res.length) {
              break;
            }
          }
        } else {
          if (
            that.$route.query.value != undefined &&
            that.$route.query.value != ""
          ) {
            that.$refs.keywordInput.value = that.$route.query.value;
            type = 1;
          } else if (sessionTake("provinceName") != null) {
            for (let i = 0; i < res.length; i++) {
              if (res[i].province == sessionTake("provinceName")) {
                that.provincialLevel = i;
                for (let q = 0; q < res[i].city.length; q++) {
                  if (res[i].city[q].name == sessionTake("cityName")) {
                    that.MunicipalLevel = q;
                    break;
                  } else if (q + 1 == res[i].city.length) {
                    break;
                  }
                }
              } else if (i + 1 == res.length) {
                break;
              }
            }
          } else {
            needDept = 0;
          }
        }
        if (needDept == 1) {
          that.departmentRequest();
        }
        that.getList(type);
      }
    );
    // // 获取地区
    // commonRequest(
    //   "/api/pms/pmsDepartment/getAllDepartmentArea?type=0"
    // ).then(res => {
    //   that.regionData = res;
    //   if (that.$route.query.province != undefined && that.$route.query.province != "") {
    //     for (let i = 0; i < res.length; i++) {
    //       if (res[i].province == that.$route.query.province) {
    //         that.provincialLevel = i;
    //         if (
    //           that.$route.query.city != undefined &&
    //           that.$route.query.city != ""
    //         ) {
    //           for (let q = 0; q < res[i].city.length; q++) {
    //             if (res[i].city[q].name == that.$route.query.city) {
    //               that.MunicipalLevel = q;
    //               if (
    //                 that.$route.query.area != undefined &&
    //                 that.$route.query.area != ""
    //               ) {
    //                 for (let w = 0; w < res[i].city[q].area.length; w++) {
    //                   if (res[i].city[q].area[w] == that.$route.query.area) {
    //                     that.DistrictLevel = w;
    //                     that.getList();
    //                     that.departmentRequest();
    //                     return;
    //                   } else if (w + 1 == res[i].city[q].area.length) {
    //                     that.getList();
    //                     that.departmentRequest();
    //                     return;
    //                   }
    //                 }
    //               } else {
    //                 that.getList();
    //                 that.departmentRequest();
    //                 return;
    //               }
    //             } else if (q + 1 == res[i].city.length) {
    //               that.getList();
    //               that.departmentRequest();
    //               return;
    //             }
    //           }
    //         } else {
    //           that.getList();
    //           that.departmentRequest();
    //           return;
    //         }
    //       } else if (i + 1 == res.length) {
    //         that.getList();
    //         that.departmentRequest();
    //         return;
    //       }
    //     }
    //   } else {
    //     if (that.$route.query.value != undefined && that.$route.query.value != "") {
    //       that.$refs.keywordInput.value = that.$route.query.value;
    //       that.getList(1);
    //       that.departmentRequest();
    //     } else if (sessionTake("provinceName") != null) {
    //       for (let i = 0; i < res.length; i++) {
    //         if (res[i].province == sessionTake("provinceName")) {
    //           that.provincialLevel = i;
    //           for (let q = 0; q < res[i].city.length; q++) {
    //             if (res[i].city[q].name == sessionTake("cityName")) {
    //               that.MunicipalLevel = q;
    //               that.getList();
    //               that.departmentRequest();
    //               return;
    //             } else if (q + 1 == res[i].city.length) {
    //               that.getList();
    //               that.departmentRequest();
    //               return;
    //             }
    //           }
    //         } else if (i + 1 == res.length) {
    //           that.getList();
    //           that.departmentRequest();
    //           return;
    //         }
    //       }
    //     } else {
    //       that.getList();
    //     }
    //   }
    // });
  },
  methods: {
    ...mapMutations(["setIsShow"]), // 显示登录弹框
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      // 1省级2市级3区级
      if (index == 1) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].province;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].name;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 3) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 4) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].departmentName;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    // 关闭登录框
    Dialog() {
      this.setIsShow(false);
    },
    // 跳转部门内页
    seeEnterprise(id) {
      window.open(`/departmentInside?id=${id}`, "_blank");
    },
    // 订阅部门
    subscribeEven(val, id) {
      // console.log(val);
      if (val == 1) {
        // 已订阅(取消订阅)
        postRequestSplicing(
          "/api/home/cancelAttention",
          `departmentId=${id}`
        ).then(res => {
          // console.log("取消订阅", res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "取消订阅成功"
            });
            this.listData.forEach(el => {
              if (el.departmentId == id) {
                el.whetherAttention = 0;
              }
            });
          }
        });
      } else if (val == 0) {
        // 未订阅(订阅)
        postRequestSplicing(
          "/api/home/departmentAttention",
          `departmentId=${id}`
        ).then(res => {
          if (res.code == 10002) {
            // 订阅已满
            this.dialogVisible = true;
          } else if (res.code == 10001) {
            // 显示登录框
            this.setIsShow(true);
            // console.log(this.setIsShow(true));
          } else if (res.code == 200) {
            this.$message({
              type: "success",
              message: "订阅成功"
            });
            this.listData.forEach(el => {
              if (el.departmentId == id) {
                el.whetherAttention = 1;
              }
            });
          }
        });
      }
    },
    // 搜索高亮
    searchHighlight(val) {
      var that = this;
      if (that.keywordValue == "") {
        return val;
      } else {
        return val.replace(
          new RegExp(that.keywordValue, "g"),
          "<em style='color: red;font-style:normal;'>" +
            that.keywordValue +
            "</em>"
        );
      }
    },
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML == "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    isControlShow() {
      this.centerDiaogVisible = false;
    },
    // 获取列表
    getList(index, pageNo) {
      if (pageNo) {
        this.Pagevalue = pageNo;
      } else {
        this.Pagevalue = 1;
      }
      var that = this;
      that.loading = true;
      that.notYet = true;
      var provinceValue = "";
      var cityValue = "";
      var areaValue = "";
      var departmentNameValue = "";
      var value = "";
      if (that.$refs.keywordInput.value != "") {
        if (index == 1) {
          value = that.$refs.keywordInput.value;
          that.keywordValue = that.$refs.keywordInput.value;
        } else {
          value = that.keywordValue;
        }
      } else {
        that.keywordValue = "";
        value = "";
      }
      if (that.provincialLevel > -1) {
        provinceValue = that.regionData[that.provincialLevel].province;
      }
      if (that.MunicipalLevel > -1) {
        cityValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].name;
      }
      if (that.DistrictLevel > -1) {
        areaValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].area[
            that.DistrictLevel
          ];
      }
      if (that.department > -1) {
        departmentNameValue =
          that.departmentData[that.department].departmentName;
      }
      //更改为es查询，需要转换地区为编码
      console.log(
        provinceValue,
        cityValue,
        areaValue,
        getCode(provinceValue, cityValue, areaValue)
      );
      let obj = {
        beginDate: "",
        dq: getCode(provinceValue, cityValue, areaValue),
        endDate: "",
        pageIndex: that.Pagevalue - 1,
        pageSize: 10,
        policyId: "",
        source: departmentNameValue,
        title: value,
        // tzlb: this.isSelect === 0 ? '通知' : '公示',
        userID: ""
      };
      postRequest("/api/es/Policy/queryPolicyList.json", obj).then(res => {
        if (res.retCode == 0) {
          that.listData = res.data.content;
          // 传总页数
          that.$refs.paging_zi.totalValue(res.data.totalElements);
          that.loading = false;
          if (res.data.content.length == 0) {
            that.notYet = false;
          }
        }
      });
    },
    // 跳转详情
    noticeDetails(id, index) {
      var that = this;
      var provinceValue = "";
      var cityValue = "";
      var areaValue = "";
      var departmentNameValue = "";
      if (that.provincialLevel > -1) {
        provinceValue = that.regionData[that.provincialLevel].province;
      }
      if (that.MunicipalLevel > -1) {
        cityValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].name;
      }
      if (that.DistrictLevel > -1) {
        areaValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].area[
            that.DistrictLevel
          ];
      }
      if (that.department > -1) {
        departmentNameValue =
          that.departmentData[that.department].departmentName;
      }
      window.open(
        // `/inform?id=${id}&Pagevalue=${that.Pagevalue}&index=${index}&value=${that.keywordValue}&provinceValue=${provinceValue}&cityValue=${cityValue}&areaValue=${areaValue}&departmentNameValue=${departmentNameValue}`
        `/inform/${id}`
      );
    },
    // 接受当前选中页数
    chage_CurrentValue(value) {
      // this.Pagevalue = 1;
      // this.Pagevalue = value;
      this.getList(0, value);
    },
    // 接受当前选中页数
    accept_CurrentValue(value) {
      // this.Pagevalue = 1;
      this.Pagevalue = value;
      this.getList();
    },
    // 省级地区切换
    provincialLevel_switch(value) {
      this.provincialLevel = value;

      this.getList();
      this.departmentRequest();
    },
    // 市级地区切换
    MunicipalLevel_switch(value) {
      this.MunicipalLevel = value;
      this.getList();
      this.departmentRequest();
    },
    // 区级地区切换
    DistrictLevel_switch(value) {
      this.DistrictLevel = value;
      this.getList();
      this.departmentRequest();
    },
    // 部门切换
    department_switch(value) {
      this.department = value;
      this.getList();
    },
    // 省级清空
    provincialEmptying() {
      this.provincialLevel = -1;
      this.MunicipalLevel = -1;
      this.DistrictLevel = -1;
      this.getList();
      this.departmentRequest();
    },
    // 市级清空
    cityLevelClearance() {
      this.MunicipalLevel = -1;
      this.DistrictLevel = -1;
      this.getList();
      this.departmentRequest();
    },
    // 部门请求
    departmentRequest() {
      var that = this;
      that.department = -1;
      var provinceValue = "";
      var cityValue = "";
      var areaValue = "";
      if (that.provincialLevel > -1) {
        provinceValue = that.regionData[that.provincialLevel].province;
      }
      if (that.MunicipalLevel > -1) {
        provinceValue = null;
        areaValue = null;
        cityValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].name;
      }
      if (that.DistrictLevel > -1) {
        provinceValue = null;
        cityValue = null;
        areaValue =
          that.regionData[that.provincialLevel].city[that.MunicipalLevel].area[
            that.DistrictLevel
          ];
      }
      commonRequest("/api/pms/pmsPolicyNotice/queryRegionDepartmentInfo", {
        province: provinceValue,
        city: cityValue,
        area: areaValue,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        that.departmentData = res;
      });
    }
  },
  watch: {
    "$store.state.isShow"(val) {
      // console.log(val);
      this.centerDiaogVisible = val;
    }
  }
};
</script>

<style lang="less" scoped>
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    .top {
      font-size: 14px;
      color: #000;
    }
    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}
.el-dialog__footer {
  height: 340px;
  position: relative;
}
.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;
  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }
  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}
.el-dialog {
  border-radius: 10px;
}
.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

.content_imgse {
  background-color: transparent !important;
  box-shadow: 0 0 black !important;
  overflow: hidden;
  text-align: center;

  img {
    margin: 0 auto;
    margin-top: 138px;
    width: 280px;
  }

  p {
    color: rgb(204, 204, 204);
    font-size: 14px;
    margin-top: 10px;
  }
}

.policyNotice {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;

  .policyNotice_top {
    background-color: #fff;
    box-shadow: -1px 3px 6px #eee;
    border-radius: 4px;

    .policyNotice_top_region {
      padding: 10px 20px;
      overflow: hidden;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      position: relative;
    }

    .policyNotice_top_department {
      padding: 10px 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 12px;

      .policyNotice_top_region_distance {
        margin-top: 0;
      }
    }

    .policyNotice_top_region_left {
      float: left;

      span {
        font-size: 14px;
        padding: 2px 6px;
        color: #333;
      }
    }

    .policyNotice_top_region_right {
      position: absolute;
      right: 20px;
      top: 14px;
      width: 40px;
      cursor: pointer;

      span {
        font-size: 14px;
        color: rgb(68, 162, 255);
      }

      img {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%) rotate(0);
        width: 8px;
      }
    }

    .policyNotice_top_region_content {
      margin-left: 60px;
      overflow: hidden;
      max-height: 32px;
      margin-right: 40px;

      li {
        float: left;
        font-size: 14px;
        padding: 2px 6px;
        color: #333;
        margin: 3px 14px;
        cursor: pointer;
        line-height: 22px;
        &:hover {
          background-color: #44a2ff;
          color: #fff;
          border-radius: 4px;
        }
      }

      .active {
        background-color: #44a2ff;
        color: #fff;
        position: relative;
        overflow: hidden;
        border-radius: 4px;

        img {
          width: 16px;
          position: absolute;
          right: -2px;
          top: -2px;
        }
      }

      .active1 {
        padding-right: 16px;
      }
    }

    .policyNotice_top_search {
      padding: 18px 20px;

      .policyNotice_top_region_distance {
        margin-top: 0;

        span {
          line-height: 32px;
        }
      }

      .policyNotice_top_search_content {
        margin-left: 85px;
        margin-right: 90px;
        overflow: hidden;
        input {
          float: left;
          display: inline-block;
          width: 240px;
          height: 32px;
          background: #ffffff;
          border: 1px solid #daeaf5;
          border-radius: 4px 0px 0px 4px;
          box-sizing: border-box;
          padding-left: 12px;
          &::-webkit-input-placeholder {
            color: #aaa;
          }
        }

        span {
          float: left;
          display: inline-block;
          box-sizing: border-box;
          width: 60px;
          height: 32px;
          line-height: 30px;
          background: #44a2ff;
          border-radius: 0px 4px 4px 0px;
          text-align: center;
          margin-left: -1px;
          color: #fff;
          cursor: pointer;
        }
      }

      .policyNotice_top_search_right {
        float: right;
        width: 80px;
        height: 32px;
        line-height: 30px;
        background: #44a2ff;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  .policyNotice_content {
    margin-top: 30px;

    .policyNotice_content_top {
      overflow: hidden;
      border-radius: 4px;
      background-color: #2862ad;

      .policyNotice_content_top_left {
        float: left;
        width: 700px;
        line-height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }

      .policyNotice_content_top_content {
        float: left;
        width: 340px;
        line-height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }

      .policyNotice_content_top_right {
        float: left;
        width: 160px;
        line-height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }
    }

    .policyNotice_content_content {
      margin-top: 10px;
      background-color: #fff;
      box-shadow: -1px 3px 6px #eee;
      border-radius: 4px;
      min-height: 610px;

      .policyNotice_content_content_content {
        padding: 16px 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(167, 166, 166, 0.2);

        .policyNotice_content_content_content_left {
          float: left;
          width: 700px;
          padding: 0 20px;

          .policyNotice_content_content_content_left_right {
            float: right;
            margin-top: 3px;

            span {
              float: left;
              padding: 2px 5px;
              background-color: #fff1de;
              color: #f8a231;
              font-size: 12px;
              line-height: 18px;
            }

            p {
              float: left;
              padding: 2px 5px;
              background-color: #ffebe8;
              color: #f24d3a;
              font-size: 12px;
              line-height: 18px;
              margin-left: 10px;
            }
          }

          .policyNotice_content_content_content_left_left {
            line-height: 28px;
            font-size: 14px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;

            &:hover {
              color: rgb(68, 162, 255);
            }
          }
        }

        .policyNotice_content_content_content_content {
          float: left;
          width: 340px;
          padding: 0 20px;

          .policyNotice_content_content_content_content_right {
            float: left;

            span {
              display: inline-block;
              background: #ffffff;
              color: #44a2ff;
              font-size: 14px;
              width: 50px;
              height: 28px;
              line-height: 28px;
              border: 1px solid #daeaf5;
              border-radius: 4px;
              box-sizing: border-box;
              text-align: center;
              cursor: pointer;
            }

            .already {
              background: #cbdce8;
              color: #fff;
              font-size: 14px;
            }
          }

          .policyNotice_content_content_content_content_left {
            float: left;
            width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 28px;
            cursor: pointer;
            font-size: 14px;

            &:hover {
              color: rgb(68, 162, 255);
            }
          }
        }

        .policyNotice_content_content_content_right {
          float: left;
          width: 160px;
          padding: 0 20px;
          line-height: 28px;
          font-size: 14px;
          color: #75778b;
        }
      }
    }
  }

  .policyNotice_bottom {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 20px;
    text-align: right;
  }
}
</style>
